<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>T-align</title>
        <meta name="description" content="test-align.html">
        <meta name="author" content="jurnlee">

        <meta name="viewport" content="width=1.0, initial-scale=1.0">

        <link rel="shortcut icon" href="/favicon.ico">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body{
            	background-color: #F8F8F8;
            }
            ul li{
            	list-style: none;
            }
             dl dd{
            	display: inline-block;
            }
            .clear{
            	clear: both;
            }
            .ten{
            	height: 10px;
            }
            /*
             *html #wraper{} IE6
             *+html #wraper{} IE7
             _height: IE6
             *height:IE7
                        其他注意盒模型边距计算，及是否支持属性即可
             */
            .header{
            	height: 50px;
            	margin-bottom: 20px;
            	background: #0880C4 ;
            }
            .header ul li{
            	height: 50px;
            	line-height: 50px;
            	padding: 0px 5px;
            	width: 90px;
            	text-align: center;
            	font-size: 18px;
            	font-weight: bold;
            	font-family: microsoft yahei;
            	color: #F8F8F8;
            	text-shadow: #fff;
            }
             .header ul li:hover{
            	color:#fff;
            }
            .header .l-ul li{
            	float: left;
            }
            .header .r-ul li{
            	float: right;
            }
           
            .wraper{
            	height: 100%;
            	width: 920px;  /*注意与margin结合的效果，百分比与边距累加，超过屏幕尺寸会出现滚动条*/
            	margin: 10px auto;
            	outline: thin solid #CCCCCC;
            	background-color: #fff;
            }
            #left, #right{
            	display: inline-block;
            	height: 100%;
            	padding: 10px;
            	margin: 0px;
            	vertical-align: top; /* 让两个内联元素都对齐到父元素的底部，没有错位 */
            }
            #left{
				width: 20%;
				height: 600px;
				background-color: #5F9EA0;
            }
            #right{
            	width: 74%;  /* 优于padding也占用位置故无法达到80%*/
				background-color: #64B9D2;
            }
            .item{
            	/*float: left;*/
            	padding: 5px;
            	margin: 3px 0px;
            	border: thin #ccc solid;
            	border-radius: 3px;
            	box-sizing: border-box;
            }
            .item .l-icon,.item .r-content{
            	/*float: left;*/
            	vertical-align: top;  /* 此处与float效果相似 */
            	outline: thin solid #f00;
            }
            .item .l-icon{
            	margin-right: 10px;
            }
            .item .r-content{
            	width: 75%;
            	
            }
            
            #footer{
            	height: 100px;
            	margin-top: 30px;
            	background-color: #666666;
            }
            #copyright{
            	width: 80%;
            	line-height: 100px;
            	margin: 0px auto;
            	text-align: right;
            	font-size: 20px;
            	color: #FEFEFE;
            }
        </style>
        <script type="text/javascript">
            
        </script>
    </head>

    <body>
    	<header class="header">
    		<ul class="l-ul">
    			<li>first</li>
    			<li>sercond</li>
    			<li>third</li>
    		</ul>
    		<ul class="r-ul">
    			<li>r-first</li>
    			<li>r-sercond</li>
    		</ul>
    	</header>
            <div class="wraper">
            	<div id="left">
            		nothing
            	</div>
            	<div id="right">
            	<dl class="item">
            		<dd class="l-icon"><img alt="icon" src="images/70x40.jpg"  width="140px" height="120px"/> </dd>
            		<dd class="r-content">
            			<p class="r-title"><b>this is atitle </b> </p>
            			<p class="r-text">
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……
            			</p>
            		</dd>
            	</dl>
            	
            	<dl class="item">
            		<dd class="l-icon"><img alt="icon" src="images/70x40.jpg"  width="140px" height="120px"/> </dd>
            		<dd class="r-content">
            			<p class="r-title"><b>this is atitle </b> </p>
            			<p class="r-text">
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……
            			</p>
            		</dd>
            	</dl>
            	</div>
            	
            	<div class="clear ten"> </div>
            	
            	<div id="">
            	<dl class="item">
            		<dd class="l-icon"><img alt="icon" src="images/70x40.jpg"  width="140px" height="120px"/> </dd>
            		<dd class="r-content">
            			<p class="r-title"><b>this is atitle </b> </p>
            			<p class="r-text">
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……这里是一段传说中的文字，应该有很长很长才对……
            				这里是一段传说中的文字，应该有很长很长才对……
            			</p>
            		</dd>
            	</dl>
            	</div>
            </div>
        <footer id="footer">
        	<div id="copyright">
        		jurnlee.testPage
        	</div>
        </footer>

    </body>
</html>
